<div class="container-xl">
    <!-- Page title -->
    <div class="page-header d-print-none">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="page-title">
                    Carousel
                </h2>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Carousel</h3>
                </div>
                <div class="card-body">
                    <div id="carousel-default" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="d-block w-100" alt="" src="./static/photos/1b73704b282a8ec6.jpg">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/3d2998219313cd37.jpg">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/6ab3200b14549f8a.jpg">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/6d35d9a2bd6c63c2.jpg">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/8a26974ee6444acd.jpg">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Carousel with indicators</h3>
                </div>
                <div class="card-body">
                    <div id="carousel-indicators" class="carousel slide" data-bs-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-bs-target="#carousel-indicators" data-bs-slide-to="0" class="active"></li>
                            <li data-bs-target="#carousel-indicators" data-bs-slide-to="1" class=""></li>
                            <li data-bs-target="#carousel-indicators" data-bs-slide-to="2" class=""></li>
                            <li data-bs-target="#carousel-indicators" data-bs-slide-to="3" class=""></li>
                            <li data-bs-target="#carousel-indicators" data-bs-slide-to="4" class=""></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="d-block w-100" alt="" src="./static/photos/8c13ad59f739558c.jpg">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/8fdeb4785d2b82ef.jpg">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/9f36332564ca271d.jpg">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/35b88fc04a518c1b.jpg">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/36e273986ed577b8.jpg">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Carousel with controls</h3>
                </div>
                <div class="card-body">
                    <div id="carousel-controls" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="d-block w-100" alt="" src="./static/photos/75b555b99d5b38c4.jpg">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/546fd146c83f428c.jpg">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/802a16cdf5ce3551.jpg">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/0986f97be719fb9a.jpg">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/1194d63fe36a8670.jpg">
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carousel-controls" role="button"
                           data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carousel-controls" role="button"
                           data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Carousel with captions</h3>
                </div>
                <div class="card-body">
                    <div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="d-block w-100" alt="" src="./static/photos/1366fdc9b9b277e4.jpg">
                                <div class="carousel-item-background d-none d-md-block"></div>
                                <div class="carousel-caption d-none d-md-block">
                                    <h3>Slide label</h3>
                                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/5358d787242861c4.jpg">
                                <div class="carousel-item-background d-none d-md-block"></div>
                                <div class="carousel-caption d-none d-md-block">
                                    <h3>Slide label</h3>
                                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/5614ec7eb9034d04.jpg">
                                <div class="carousel-item-background d-none d-md-block"></div>
                                <div class="carousel-caption d-none d-md-block">
                                    <h3>Slide label</h3>
                                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/56614e12b2a7bd68.jpg">
                                <div class="carousel-item-background d-none d-md-block"></div>
                                <div class="carousel-caption d-none d-md-block">
                                    <h3>Slide label</h3>
                                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" alt="" src="./static/photos/77586f6ffa9fbc5e.jpg">
                                <div class="carousel-item-background d-none d-md-block"></div>
                                <div class="carousel-caption d-none d-md-block">
                                    <h3>Slide label</h3>
                                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                                </div>
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carousel-captions" role="button"
                           data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carousel-captions" role="button"
                           data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
